<template>
  <div class="tu">
    <div class="tu0 tu1">
      <p class="shuzi">18</p>
      <p class="zi">今天参加活动人次</p>
    </div>
    <div class="tu0 tu2">
      <p class="shuzi">￥<i>2330.00</i></p>
      <p class="zi">今天活动收入</p>
    </div>
    <div class="tu0 tu3">
      <p class="shuzi">18</p>
      <p class="zi">今日课程订单数</p>
    </div>
    <div class="tu0 tu4">
      <p class="shuzi">￥<i>2330.00</i></p>
      <p class="zi">今日课程订单收入</p>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.tu{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  .tu0{
    width: 290px;
    height: 150px;
  }
  .tu1{
    background-image: url('../img/main/1/main-beijing-18-jianbiantiao.png'),url('../img/main/1/main-beijing-18-jianbiankuai1.png'),url('../img/main/1/main-beijing-18.png');
    background-repeat: no-repeat;
    background-position: 65px 115px,center 115px,center;
  }
  .tu2{
    background-image: url('../img/main/3/main-beijing-2330-jianbiantiao.png'),url('../img/main/2/main-beijing-2330-jianbiankuai1.png'),url('../img/main/2/main-beijing-2330.png');
    background-repeat: no-repeat;
    background-position: 65px 115px,center 115px,center;
  }
  .tu3{
    background-image: url('../img/main/2/main-beijing-18-jianbiantiao2.png'),url('../img/main/3/main-beijing-18-jianbiankuai2.png'),url('../img/main/3/main-beijing-18-2.png');
    background-repeat: no-repeat;
    background-position: 65px 115px,center 115px,center;
  }
  .tu4{
    background-image: url('../img/main/4/main-beijing-2330-jianbiantiao2.png'),url('../img/main/4/main-beijing-2330-jianbiankuai2.png'),url('../img/main/4/main-beijing-2330-2.png');
    background-repeat: no-repeat;
    background-position: 65px 115px,center 115px,center;
  }
  .shuzi{
    font-size: 36px;
    color: #fff;
    margin-top: 35px;
    margin-left: 40px;
    font-weight: 700;
  }
  .zi{
    font-size: 18px;
    color: #fff;
    margin-top: 13px;
    margin-left: 45px;
  }
}
</style>